<template>
    <div class="Header">
        <div class="logo_box">
            <div class="logo">
                <img src="../../assets/logo.png" alt=""/>
            </div>
            <span>XXX后台管理系统</span>
        </div>
        <!-- <span>头部</span> -->
        <el-button @click="setOtherRouter">系统</el-button>
        <!--        <el-button-group class="btn_btn">-->
        <!--            <el-button-->
        <!--                    type="primary"-->
        <!--                    class="BtnNoBack"-->
        <!--                    @click="yi_msg()"-->
        <!--                    :class="{ active: isActive }"-->
        <!--                    icon="el-icon-edit">菜单1-->
        <!--            </el-button>-->
        <!--            <el-button-->
        <!--                    type="primary"-->
        <!--                    class="BtnNoBack"-->
        <!--                    @click="yi_mission()"-->
        <!--                    :class="{ active: isActive2 }"-->
        <!--                    icon="el-icon-share">-->
        <!--                菜单2-->
        <!--            </el-button>-->
        <!--            <el-button-->
        <!--                    type="primary"-->
        <!--                    class="BtnNoBack"-->
        <!--                    @click="yi_mission_miss()"-->
        <!--                    :class="{ active: isActive3 }"-->
        <!--                    icon="el-icon-delete">菜单3-->
        <!--            </el-button>-->
        <!--        </el-button-group>-->
        <el-button
                class="logoutBtn"
                @click="drawer = true"
                type="primary"
                style="margin-left: 16px"
        >
            我的
        </el-button>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                direction="rtl"
                :with-header="false"
        >
            <div class="drawer_yu">
                <el-button type="primary" @click="logout()">退出登录</el-button>
            </div>
        </el-drawer>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>请选择系统</span>
            <el-radio-group v-model="radio">
                <el-radio :label="1">系统1</el-radio>
                <el-radio :label="2">系统2</el-radio>
                <el-radio :label="3">系统3</el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setRouter">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                isActiveVal: '',
                drawer: false,
                isActive: true,
                isActive2: false,
                isActive3: false,
                dialogVisible: false,
                radio: '',
            }
        },
        mounted() {

            if (this.$store.state.user.sys_flag !== 0) {
                // this.setLeftRouter(this.$store.state.user.sys_flag)
                // this.radio = this.$store.state.user.sys_flag
                // console.log(this.radio)
                // this.setRouter()
                // this.$emit('listenActiveVal', this.radio)
            } else {
                // this.setLeftRouter(1)
            }
        },
        methods: {
            setOtherRouter() {
                this.dialogVisible = true
                this.radio = this.$store.state.user.sys_flag
            },
            setRouter() {
                this.dialogVisible = false
                console.log(this.radio)
                if (this.radio === 1) {
                    this.$router.replace({path: '/one/oneIndex'})
                }
                if (this.radio === 2) {
                    this.$router.replace({path: '/two/twoIndex'})
                }
                this.$emit('listenActiveVal', this.radio)
                this.$store.commit('SET_SYS_FLAG', this.radio);
            },
            logout() {
                this.$store.dispatch('LogOut').then(() => {
                    this.$router.push('/login')
                })
            },
        },
    }
</script>

<style lang="scss">
    .Header {
        overflow: hidden;

        .logoutBtn {
            float: right;
            margin-top: 10px;
        }

        .drawer_yu {
            padding: 20px;
        }

        .logo_box {
            text-align: left;
            float: left;

            .logo {
                float: left;
                height: 60px;
                margin-right: 10px;

                img {
                    height: 60px;
                }
            }
        }

        .btn_btn {
            float: left;
            margin-left: 20px;
            height: 60px;

            button {
                height: 60px;
            }
        }
    }

    /* #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    } */
</style>
